<template>
	<view>
		<u-loading-page :loading="pageLoading"></u-loading-page>
		<view v-if="!pageLoading">
			<view class="first-screen" :style="{backgroundImage: `url(${info.backgroundImage.url})`}">
				<view class="text">
					<view class="status">{{info.category.icon}} {{info.category.name}}</view>
					<view class="mt-20" style="color:white;font-size:32px;font-weight: bold;">{{info.name}}</view>
					<!-- <view class="mt-10" style="color:#eeeeee;font-size:14px">
					{{info.introduction.description}}
				</view> -->
					<view class="tags mt-20">
						<view v-for="item in info.tags">{{item}}</view>
					</view>
					<view class="mt-10" style="color:#eeeeee;font-size:14px" v-for="item in info.basicInfo">
						<view><text style="margin-right: 5px;color:#13BA83" :class="item.icon"></text> {{item.text}}
						</view>
					</view>
				</view>
			</view>
			<view class="main-content">
				<view>
					<u-tabs :list="[{name:'景点介绍'},{name:'景点实景'},{name:'游览指南'}]" :current="tabsIndex" lineColor="#13BA83"
						lineHeight="1" lineWidth="40" :inactiveStyle="{color:'#999'}" :activeStyle="{color:'#13BA83'}"
						@click="tabsClick"></u-tabs>
				</view>
				<view class="tabs-content pb-30" v-if="tabsIndex == 0">
					<view class="p-30" style="font-size: 14px;color:#666">{{info.description}}</view>
					<view class="p-30" :style="{fontSize:'17px',color:'#333',fontWeight:'bold'}">景点特色</view>
					<view class="highlights">
						<view class="highlights-item mt-30" v-for="item in info.attractions">
							<view class="icon" style="color:#13BA83" :class="item.icon"></view>
							<view class="info">
								<view style="font-size:16px;font-weight: bold;">{{item.name}}</view>
								<view class="mt-20" style="font-size:14px;color:#999999">{{item.description}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="tabs-content pb-30" v-if="tabsIndex == 1">
					<view class="p-30" :style="{fontSize:'17px',color:'#333',fontWeight:'bold'}">
						{{info.scenicRealityView.featuredVideo.title}}</view>
					<view class="px-30" style="border-radius: 15px;overflow: hidden;">
						<video id="myVideo" style="width:100%;height:220px;"
							:poster="info.scenicRealityView.featuredVideo.thumbnail"
							:src="info.scenicRealityView.featuredVideo.source" controls></video>
					</view>
					<!-- 照片库 -->
					<view class="p-30" :style="{fontSize:'17px',color:'#333',fontWeight:'bold'}">照片库</view>
					<view style="display: flex;flex-wrap: wrap;margin:5px">
						<u-image :customStyle="{margin:'5px'}" width="105" @click="previewImage(index)" radius="10"
							height="105" v-for="(item,index) in info.scenicRealityView.photoGallery"
							:src="item.thumbnail"></u-image>
					</view>
				</view>
				
				<view class="tabs-content" v-if="tabsIndex == 2">
					<view class="p-30" :style="{fontSize:'17px',color:'#333',fontWeight:'bold'}">位置信息</view>
					<view class="p-30">
						<view style="background-color: white;padding:30rpx;border-radius: 15px;">
							<view style="margin-bottom: 15px;" v-for="item in info.locationInfo.items">
								<view style="display: flex;align-items: center;justify-content:space-between;font-size: 14px;">
									<view style="color:#666">{{item.label}}</view>
									<view style="color:#333">{{item.value}}</view>
								</view>
							</view>
								<map style="width: 100%; height: 200px;" :latitude="info.locationInfo.latitude" :longitude="info.locationInfo.longitude"></map>
						</view>
					
					</view>
					<view class="p-30" :style="{fontSize:'17px',color:'#333',fontWeight:'bold'}">设施服务</view>
					<view class="p-30">
						<view style="background-color: white;padding:30rpx;border-radius: 15px;">
							<view style="display: flex;flex-wrap: wrap;">
								<view style="width: 33.3333%;text-align: center;padding:20rpx;" v-for="item in info.facilityServices">
									<view style="font-size: 18px;color:#13BA83"><text :class="item.icon"></text></view>
									<view style="font-size:14px;color:#666;margin-top:10px">{{item.name}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getSpotsDetail
	} from '@/config/api.js';
	export default {
		data() {
			return {
				tabsIndex: 0,
				options: {},
				info: [],
				pageLoading: true
			}
		},
		onLoad(options) {
			this.options = options;
			this.getPageData(() => {
				this.pageLoading = false;
			});
		},
		onPullDownRefresh() {
			this.getPageData(function() {
				uni.stopPullDownRefresh();
			})
		},
		methods: {
			getPageData(cb) {
				getSpotsDetail(this.options.id).then(res => {
					this.info = res.layout;
					typeof cb == 'function' && cb();
				});
			},
			tabsClick(e) {
				this.tabsIndex = e.index;
			},
			// 预览图片
			previewImage(index) {
				const list = this.info.scenicRealityView.photoGallery.map(item => item.thumbnail);
				uni.previewImage({
					current: index,
					urls:list
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	.first-screen {
		height:100vh;
		/* #ifdef H5 */
		height: calc(100vh - var(--status-bar-height) - var(--window-top));
		/* #endif */
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;

		&::after {
			content: "";
			display: block;
			background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.8));
			position: absolute;
			width: 100%;
			height: 100%;
		}

		.text {
			width: 100%;
			padding: 30rpx;
			position: absolute;
			left: 0;
			bottom: 0;
			z-index: 2;

			.status {
				display: inline-block;
				padding: 2px 8px;
				border-radius: 5px;
				background-color: #13BA83;
				font-size: 20rpx;
				margin: 10rpx;
				color: white;
			}

			.tags {
				margin-left: -10rpx;
				margin-right: -10rpx;
				display: flex;
				flex-wrap: wrap;

				&>view {
					display: inline-block;
					padding: 2px 8px;
					border-radius: 5px;
					background-color: rgba(0, 0, 0, 0.5);
					color: white;
					font-size: 20rpx;
					margin: 10rpx;
				}
			}
		}

		.circle {
			width: 40px;
			height: 40px;
			border: 2px solid white;
			border-radius: 50%;
			background-color: transparent;
			position: relative;
			display: flex;
			justify-content: center;
			align-items: center;

			.triangle {
				width: 0;
				height: 0;
				border-left: 10px solid transparent;
				border-right: 10px solid transparent;
				border-top: 15px solid white;
				position: absolute;
				animation: float 1s infinite ease-in-out;
			}
		}

		@keyframes float {

			0%,
			100% {
				transform: translateY(0);
			}

			50% {
				transform: translateY(-3px);
			}
		}
	}

	.tags {
		margin-left: -10rpx;
		margin-right: -10rpx;
		display: flex;
		flex-wrap: wrap;

		text {
			display: inline-block;
			padding: 2px 8px;
			border-radius: 5px;
			background-color: lightgoldenrodyellow;
			font-size: 20rpx;
			margin: 10rpx;
		}
	}

	.highlights {
		padding: 0 30rpx;

		.highlights-item {
			display: flex;

			.icon {
				flex-shrink: 0;
				width: 40px;
				font-size: 32px;
			}

			.info {
				flex-grow: 1;
				padding-left: 20rpx;
			}
		}
	}
</style>